<template>
  <div>
    <el-carousel height="400px" trigger="click" class="carousel" type="card" :interval="5000">
      <el-carousel-item v-for="item in carousels" :key="item.gid">
        <router-link :to="{ name: 'introduce', query: { commodityId: item.gid } }">
          <img :src="item.pthumbnail" />
        </router-link>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'HomeBand',
  props: ['carousels'],
  data() {
    return {}
  }
}
</script>
<style lang="less" scoped>
.carousel {
  width: 800px;
  margin: 0 auto;
}

.carousel img {
  width: 400px;
  height: 400px;
  /* 缩放 */
  object-fit: contain;
}
</style>
